<template>
  <!-- 新增菜单弹框 -->
  <el-dialog title="新增菜单" :visible="menuAddDialogVisible" @close="onClose">
    <el-form :model="menuAddForm">
      <el-form-item label="菜单名称" :label-width="menuAddFormLabelWidth">
        <el-input v-model="menuAddForm.name"></el-input>
      </el-form-item>
      <el-form-item label="PATH" :label-width="menuAddFormLabelWidth">
        <el-input v-model="menuAddForm.path"></el-input>
      </el-form-item>
      <el-form-item label="VUE组件" :label-width="menuAddFormLabelWidth">
        <el-input v-model="menuAddForm.component"></el-input>
      </el-form-item>
      <el-form-item label="ICON" :label-width="menuAddFormLabelWidth">
        <el-input v-model="menuAddForm.icon"></el-input>
      </el-form-item>
      <el-form-item label="排序" :label-width="menuAddFormLabelWidth">
        <el-input-number v-model="menuAddForm.orderNum" :min="1" :max="99"></el-input-number>
      </el-form-item>
      <el-form-item label="备注" :label-width="menuAddFormLabelWidth">
        <el-input v-model="menuAddForm.descr"></el-input>
      </el-form-item>
      <el-form-item label="父级菜单" :label-width="menuAddFormLabelWidth">
        <el-tree
          :data="menuData"
          default-expand-all
          node-key="key"
          ref="tree2"
          highlight-current
          :props="defaultProps"
          show-checkbox
          check-strictly=true
        ></el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="handleSubmit">确认</el-button>
      <el-button type="danger" size="mini" @click="onCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMenuOnlyTree } from "@/api/menu";
import { addMenu } from "@/api/menu";

export default {
  name: "MenuAdd",
  props: ["menuAddDialogVisible"],
  data() {
    return {
      //   listLoading: true,
      menuAddForm: {
        name: "",
        path: "",
        component: "",
        icon: "",
        orderNum: "",
        descr: "",
      },
      menuAddFormLabelWidth: "100px",
      //   roles: [],
      //   roleOptions: [],
      menuData: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    reset() {
      this.menuAddForm.name = "";
      this.menuAddForm.path = "";
      this.menuAddForm.component = "";
      this.menuAddForm.icon = "";
      this.menuAddForm.orderNum = "";
      this.menuAddForm.descr = "";
    },
    handleSubmit() {
      var nodes = this.$refs.tree2.getCheckedNodes();
      if (nodes.length > 1) {
        this.$message.error("父级菜单只能单选");
      } else if (nodes.length < 1) {
        this.$message.error("请选择父级菜单");
      } else {
        var menuId = nodes[0].id;

        var params = {
          parentId: menuId,
          name: this.menuAddForm.name,
          path: this.menuAddForm.path,
          component: this.menuAddForm.component,
          icon: this.menuAddForm.icon,
          orderNum: this.menuAddForm.orderNum,
          descr: this.menuAddForm.descr,
        };

        addMenu(params).then((response) => {
          if (response.data == 1) {
            this.reset();
            this.$emit("success");
          } else {
            this.reset();
            this.$emit("failed", response.data.msg);
          }
        });
      }
    },
    onCancel() {
      this.$emit("cancel");
    },
    onClose() {
      this.$emit("close");
    },
  },
  watch: {
    menuAddDialogVisible() {
      if (this.menuAddDialogVisible) {
        getMenuOnlyTree().then((response) => {
          this.menuData = response.data;
        });
      }
    },
  },
};
</script>
